<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../css/mui.css">
		<link rel="stylesheet" type="text/css" href="../../css/home/read.css" />
		<link rel="stylesheet" href="../../css/vCloak.css" />
	</head>
	<style type="text/css">
		.message>.name {
			padding: 8px 0;
		}
		
		.message>.readCount>div:first-child {
			margin: 0;
		}
		
		.readCount>div {
			line-height: 58px;
		}
	</style>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">排行榜</h1>
		</header>
		<div class="mui-content">
			<div id="tabbar" class="mui-control-content mui-active">
				<div class="mui-scroll">
					<div class="nav">
						<div class="rank">排名</div>
						<div class="name">姓名</div>
						<div class="read">朗读次数</div>
						<!--<div class="integral">称号</div>-->
					</div>
					<div class="message" v-for="(tmp,index) in list">
						<div class="rank" v-cloak>{{index+1}}</div>
						<div class="name">
							<div class="name_head"><img :src="tmp.avatar"  v-cloak/></div>
							<div class="name_data">
								<div v-text="tmp.studentName"></div>
							</div>
						</div>
						<div class="read" v-cloak>{{tmp.readingCount}}次</div>
						<!--<div class="dengji" v-cloak>{{tmp.desc}}</div>-->
					</div>
				</div>
			</div>
			<div id="tabbar-with-chat" class="mui-control-content">
				<div class="mui-scroll">
					<div class="nav">
						<div class="rank">排名</div>
						<div class="name">姓名</div>
						<div class="read">朗读次数</div>
						<!--<div class="integral">称号</div>-->
					</div>
					<div class="message" v-for="(tmp1,index) in list1">
						<div class="rank" v-cloak>{{index+1}}</div>
						<div class="name">
							<div class="name_head"><img :src="tmp1.avatar" /></div>
							<div class="name_data">
								<div v-cloak>{{tmp1.studentName }}</div>
							</div>
						</div>
						<div class="read" v-cloak>{{tmp1.readingCount}}次</div>
						<!--<div class="dengji" v-cloak>{{tmp1.desc}}</div>-->
					</div>
				</div>

			</div>
			<div id="tabbar-with-contact" class="mui-control-content">
				<div class="mui-scroll">
					<div class="nav">
						<div class="rank">排名</div>
						<div class="name">姓名</div>
						<div class="read">朗读次数</div>
						<!--<div class="integral">称号</div>-->
					</div>
					<div class="message" v-for="(tmp2,index) in list2">
						<div class="rank" v-cloak>{{index+1}}</div>
						<div class="name">
							<div class="name_head"><img :src="tmp2.avatar" /></div>
							<div class="name_data">
								<div v-cloak>{{tmp2.studentName }}</div>
							</div>
						</div>
						<div class="read" v-cloak>{{tmp2.readingCount}}次</div>
						<!--<div class="dengji" v-cloak>{{tmp2.desc}}</div>-->
					</div>
				</div>
			</div>
		</div>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active grade" href="#tabbar">
				<span class="mui-tab-label">本班</span>
			</a>
			<a class="mui-tab-item regional" href="#tabbar-with-chat">
				<span class="mui-tab-label">地区</span>
			</a>
			<a class="mui-tab-item total" href="#tabbar-with-contact">
				<span class="mui-tab-label">全球</span>
			</a>
		</nav>
	</body>
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/libs/zepto_1.1.3.js"></script>
	<script src="../../js/libs/vue.js"></script>
	<script src="../../js/common/common.js"></script>
	<script>
		(function() {
			mui.init()
			var vm = new Vue({
				el: '.mui-content',
				data: {
					list: '',
					list1: '',
					list2: '',
				}
			});

			common.ajax("student/reading/queryRank", {
				uid: common.uid,
				token: common.token,
				type: 1
			}, function(data) {
				console.log(JSON.stringify(data))
				if(data.code == 200) {

					vm.list = data.data;
					//				console.log(data.data);
				} else {
					mui.toast(data.data)
				}
			}, "get");
			$(".regional").on("tap", function() {
					common.ajax("student/reading/queryRank", {
						uid: common.uid,
						token: common.token,
						type: 2
					}, function(data) {
						if(data.code == 200) {

							vm.list1 = data.data;
							//				console.log(data.data);
						} else {
							mui.toast(data.data)
						}
					}, "get");
				}),
				$(".total").on("tap", function() {
					common.ajax("student/reading/queryRank", {
						uid: common.uid,
						token: common.token,
						type: 3
					}, function(data) {
						if(data.code == 200) {

							vm.list2 = data.data;
							//				console.log(data.data);
						} else {
							mui.toast(data.data)
						}
					}, "get");
				}),
				common.clsopen()
		})()
	</script>
	</body>

</html>